<script setup>
import {ref} from "vue";
import {useUserInfoStore} from "../../stores/modules/userInfo";
import {BaseImgUrl, BaseURL} from "../../utils/lshttp";
import Lh_modal from "./lh_modal.vue";
import {onShow} from "@dcloudio/uni-app";
import {getOfficialAccountInfoAPI, wechatH5LoginAPI} from "../../services/login";

const userInfo = useUserInfoStore()
const lh_show = ref(false)
const check_on = ref(0)
const login = () => {
  if (check_on.value === 0) {
    uni.showToast({
      title: '请勾选同意协议',
      icon: 'none',
      duration: 1500
    });
  } else {
    wechatAppletLogin()
  }
}
const h5WxCode = ref()
onShow(() => {
  //是否存在code 截取code代码 授权会返回code需要截取链接中code
  h5WxCode.value = getUrlParam("code");
})

const wechatAppletLogin = () => {
  userInfo.authLogin(0, h5WxCode.value)
  // if (h5WxCode.value === null || h5WxCode.value === '') {
  //   const res = await getOfficialAccountInfoAPI()
  //   let url = 'https://open.weixin.qq.com/connect/oauth2/authorize?appid=' + res.result.appid + '&redirect_uri=' +
  //       encodeURIComponent(BaseURL + '/business/index.html#/pages/login/h5_login') + '&response_type=code&scope=snsapi_userinfo&connect_redirect=1#wechat_redirect';
  //   window.location.replace(url);
  //   return
  // }
  // await wechatH5LoginAPI(h5WxCode.value)
}

const getUrlParam = (name) => {
  // #ifdef H5
  // 判断公众号截取code
  return decodeURIComponent((new RegExp('[?|&]' + name + '=' + '([^&;]+?)(&|#|;|$)').exec(location.href) || [undefined,
    ''
  ])[1].replace(/\+/g, '%20')) || null
  // #endif
}
const check_icon = () => {
  if (check_on.value === 1) {
    check_on.value = 0
  } else {
    check_on.value = 1
  }
}
//用户协议
const yhxy = () => {
  uni.navigateTo({
    url: '../login/yhxy'
  })
}
//隐私协议
const ysxy = () => {
  uni.navigateTo({
    url: '../login/ysxy'
  })
}
const toLogin = (type) => {
  if (type === 0) {
    uni.navigateTo({
      url: '/pages/login/code_login'
    })
  } else {
    uni.navigateTo({
      url: '/pages/login/phone_login'
    })
  }
}
const platform = uni.getSystemInfoSync().platform;
onShow(() => {
  // #ifdef MP  || H5
  userInfo.setIsOpenWXLogin(true)
  // #endif
  // #ifdef APP-PLUS
  if (platform === 'android') {
    userInfo.setIsOpenWXLogin(true)
  }
  // #endif
  if (!userInfo.isOpenWXLogin) {
    uni.navigateTo({
      url: '/pages/login/phone_login'
    })
  }
})
const decryptPhoneNumber = (e) => {
  console.log("decryptPhoneNumber", e)
}
</script>
<template>
  <view>
    <u-navbar title="" placeholder autoBack titleStyle="color:white">
    </u-navbar>
    <view class="logoh5">
      <image :src="BaseImgUrl + '/images/logo_wechat.png'" style="border-radius: 40rpx;"></image>
    </view>
    <view class="h5wxlogin-wrap" @tap="login">
      <image :src="BaseImgUrl + '/images/wechat_icon.png'"></image>
      <view>快捷登录</view>
      <!--      <button open-type="getPhoneNumber" @getphonenumber="decryptPhoneNumber">手机号授权登录</button>-->
    </view>
    <!-- #ifdef APP-PLUS || H5-->
    <view class="h5wxlogin-wrap1">
      <view style="display: flex;align-items: center">
        <u-line style="flex: 1"></u-line>
        <view style="margin: 0 20rpx;color: #9B9B9B">其它登录方式</view>
        <u-line style="flex: 1"></u-line>
      </view>
      <view style="display: flex;align-items: center;font-size: 26rpx;color: #A8A8A8;margin-top: 68rpx">
        <view style="flex: 1"></view>
        <view style="display: flex;flex-direction: column;align-items: center;" @click="toLogin(0)">
          <u-icon name="phone" size="32" color="#A8A8A8"></u-icon>
          <view>验证码登录</view>
        </view>
        <view style="width: 168rpx"></view>
        <view style="display: flex;flex-direction: column;align-items: center;" @click="toLogin(1)">
          <u-icon name="lock-open" size="32" color="#A8A8A8"></u-icon>
          <view>密码登录</view>
        </view>
        <view style="flex: 1"></view>
      </view>
    </view>
    <!-- #endif -->
    <view class="protocol-content">
      <view class="protocol">
        <view class="dianji" @tap="check_icon()">
          <image v-if="check_on === 0" class="check_icon"
                 :src="BaseImgUrl + '/images/icon_check_gray.png'"></image>
          <image v-else class="check_icon" :src="BaseImgUrl + '/images/icon_check_on.png'"></image>
        </view>
        <view>点击同意《
          <text @click.stop="yhxy">用户协议</text>
          》和《
          <text @click.stop="ysxy">隐私协议</text>
          》
        </view>
      </view>
      <u-safe-bottom></u-safe-bottom>
    </view>

    <!-- 违规弹窗 -->
    <u-popup v-model="lh_show" mode="center" border-radius="20" width="550" :closeable="true" @close="close()">
      <Lh_modal></Lh_modal>
    </u-popup>
  </view>
</template>
<style>
page {
  background-color: #FFFFFF;
}
</style>

<style lang="scss" scoped>
page {
  background-color: #fff;
}

.logo {
  margin-top: 0;
  text-align: center;
  margin-bottom: 70rpx;

  image {
    width: 175rpx;
    height: 175rpx;
  }
}

.logoh5 {
  position: absolute;
  top: 26%;
  text-align: center;
  margin-bottom: 38px;
  left: 0;
  right: 0;

  image {
    width: 240rpx;
    height: 240rpx;
  }
}

.shadow_box {
  box-sizing: border-box;
  padding: 60rpx 40rpx;

  .img_code {
    font-size: 28rpx;
    font-weight: bold;
  }
}

.phone-input {
  background-color: #F7F8FA;
  margin: 30rpx 0;
  padding: 10rpx 30rpx;
  border-radius: 200rpx;
  border: 1px solid #F7F8FA;
  display: flex;
  color: #666666;
  align-items: center;

  .inputWidth {
    width: 100%;
  }

  //box-shadow: 0px 5px 13px 0px rgba(0, 0, 0, 0.05);
  u-button {
    margin-left: auto;
  }
}

.input-box {
  width: 80%;
  margin: 0 auto;


}

.divcolor {
  color: #666666;
}

.code-brn {
  width: 210rpx;
  color: #007AFF;
  padding: 10rpx 4rpx;
  text-align: center;

  image {
    width: 200rpx;
  }
}

.code-brn2 {
  width: 200rpx;
  height: 70rpx;
  color: #007AFF;
  padding: 0 4rpx;
  text-align: center;

  image {
    width: 200rpx;
    height: 70rpx;
  }
}

.h5wxlogin-wrap {
  position: absolute;
  height: 66px;
  display: flex;
  align-items: center;
  background: linear-gradient(to right, #FC754A, #FEBC5B);
  color: #FFFFFF;
  border-radius: 100px;
  width: 80%;
  margin: 0 auto;
  left: 0;
  right: 0;
  bottom: 44%;
  justify-content: center;

  image {
    z-index: 1;
    width: 60rpx;
    height: 60rpx;
    margin-right: 10rpx;
  }
}

.h5wxlogin-wrap1 {
  position: absolute;
  color: #FFFFFF;
  width: 90%;
  margin: 0 auto;
  left: 0;
  right: 0;
  bottom: 15%;
}

.h5wxlogin-wrap2 {
  position: absolute;
  height: 66px;
  display: flex;
  align-items: center;
  color: #FFFFFF;
  border-radius: 100px;
  width: 80%;
  margin: 0 auto;
  left: 0;
  right: 0;
  bottom: 31%;
  justify-content: center;
}

.qitadengl {
  position: absolute;
  top: 58%;
  text-align: center;
  margin: 0 auto;
  left: 0;
  right: 0;
  color: #999999;
}

.login-btn {
  height: 100rpx;
  border-radius: 200rpx;
  background-image: linear-gradient(90deg, #FC754A, #FEBC5B);
  align-self: center;
  width: 600rpx;
  justify-content: center;
  align-items: center;
  text-align: center;
  line-height: 100rpx;
  color: #FFFFFF;
  margin: 70rpx auto 20rpx;
  box-shadow: 0 5px 13px 0 rgba(0, 0, 0, 0.05);
}

.login-wrap {
  position: relative;
  height: 120rpx;
  color: #999999;
  margin-top: 40rpx;

  .MPlogin-btn {
    height: 100rpx;
    width: 100rpx !important;
    border-radius: 200rpx;
    background-color: rgba(255, 255, 255, 0);
    text-align: center;
    position: absolute;
    left: 0;
    right: 0;
    z-index: 2;
  }

  image {
    position: absolute;
    left: 0;
    right: 0;
    margin: 0 auto;
    z-index: 1;
    width: 110rpx;
    height: 110rpx;
  }

  uni-button:after {
    content: " ";
    width: 200%;
    height: 200%;
    position: absolute;
    top: 0;
    left: 0;
    border: 0 solid rgba(0, 0, 0, .2) !important;
    -webkit-transform: scale(.5);
    transform: scale(.5);
    -webkit-transform-origin: 0 0;
    transform-origin: 0 0;
    box-sizing: border-box;
    border-radius: 10px;
  }
}

.disanf {
  padding-top: 110rpx;
  text-align: center;
  color: #999999;

  image {
    width: 102rpx;
    height: 102rpx;
  }
}

.xieyi {
  display: flex;
  align-items: center;
}

.protocol {
  width: 78%;
  color: #999;
  padding: 0 0 10px 0;
  margin: 20rpx auto 10px;
  display: flex;
  font-size: 24rpx;
  justify-content: center;
  align-items: center;

}

.protocol-content {
  position: fixed;
  bottom: 20rpx;
  left: 0;
  right: 0;
  margin: 0 auto;
}

.dianji {
  padding: 8rpx;
}

.protocol text {
  color: #2764FF;
}

.check_icon {
  width: 38rpx;
  height: 38rpx;
  position: relative;
  top: 0;
  margin-right: 7rpx;
}

.change_login {
  justify-content: center;
  color: #666666;
  font-size: 30rpx;
  display: flex;
  align-items: center;
  width: 60%;
  margin: 40rpx auto 0;

  .zhucetitle {
    text-align: center;
  }
}

.bigBox {
  width: 100%;
  height: 100%;
  box-sizing: border-box;
  padding: 10% 15px 0;
}

.phone_login {
  width: 100%;
  font-size: 24px;
  font-weight: bold;
  height: auto;
  line-height: 40px;
  color: #555555;
  text-align: center;
}

.input {
  width: 100%;
  height: 45px;
  margin-bottom: 25px;
  border-radius: 6px;
  margin-top: 30px;
}

.input input {
  box-sizing: border-box;
  padding-left: 10px;
  line-height: 45px;
  border-radius: 4px;
  height: 100%;
  border: 1px solid #cccccc;
}

.set_code {
  width: 100%;
}

.set_code input {
  width: 60%;
  float: left;
  border-right: 0;
  border-radius: 6px 0 0 6px;
}

.set_code view {
  display: inline-block;
  width: 40%;
  float: left;
  line-height: 45px;
  background-color: #FB9360;
  color: white;
  font-size: 14px;
  text-align: center;
  border-radius: 0 6px 6px 0
}

.login {
  width: 100%;
  height: 45px;
  line-height: 45px;
  text-align: center;
  color: white;
  background: linear-gradient(to right, #FC754A, #FEBC5B);
  margin-top: 20px;
  border-radius: 30px;
}
</style>
